<template>
  <div>
    <!-- Header -->
    <nav class="relative
        w-full
        flex flex-wrap
        py-4
        bg-gray-100
        text-gray-500
        hover:text-gray-700
        focus:text-gray-700
        navbar navbar-expand-lg navbar-light">
      <div class="container-fluid w-full flex flex-wrap px-6">
        <button class="
            navbar-toggler
            text-gray-500
            border-0
            hover:shadow-none hover:no-underline
            py-2
            px-2.5
            bg-transparent
            focus:outline-none focus:ring-0 focus:shadow-none focus:no-underline
            " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        >
        </button>
        <div class="flex">
          <router-link to="/" class="px-2">Courses APP</router-link>
          <router-link to="/about" class="px-2">About</router-link>
          <router-link to="/test" class="px-2">Test</router-link>
        </div>
        <div class="flex" id="navbarNavAltMarkup">
          <div class="">
            <!-- <router-link to="/courses"
              class=" px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">
              Courses
            </router-link> -->
            <router-link v-if="!userData" to="/login"
              class=" px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">
              Login
            </router-link>
            <router-link v-if="!userData" to="/Signup"
              class=" px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">
              Sign up
            </router-link>
            <div v-if="userData">
              <el-dropdown>
                <span class="el-dropdown-link text-lg">
                  {{ userData }}
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logout">logout</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown>
                <div>
                  <span v-for="role in $store.state.user.roles" class="p-1 border rounded bg-cyan-400 text-white">
                    {{ role }}
                  </span>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <div class="px-1">
                      <el-checkbox-group v-model="$store.state.user.roles" :min="1">
                        <el-checkbox label="student"></el-checkbox>
                        <el-checkbox label="ta"></el-checkbox>
                        <el-checkbox label="teacher"></el-checkbox>
                        <el-checkbox label="admin"></el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!-- Header -->
    <div class="container mt-4 px-40">
      <router-view />
    </div>
    <!-- Footer -->
    <footer class="text-center text-lg-start bg-light text-muted mt-4">
      <div class="text-center p-4" style="background-color: gainsboro;">
        © 2023 Copyright -
        <a class="text-reset fw-bold text-decoration-none" target="_blank" href="https://twitter.com/alejoriosm04">
        xxx
        </a>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      checkList: [],
    }
  },
  watch: {
    checkList(newList, oldList) {
      if (newList.length > 0) {
        this.$store.state.user.roles = newList;
        const order = ['student', 'ta', 'teacher', 'admin'];
        order.forEach(item => {
          if(newList.includes(item)) {
            this.$store.state.user.role = item;
          }
        });
      }
    },
    '$store.state.user.roles'(newRoles, oldRoles) {
      const order = ['student', 'ta', 'teacher', 'admin'];
      order.forEach(item => {
        if(newRoles.includes(item)) {
          this.$store.state.user.role = item;
        }
      });
    },
  },
  computed: {
    userData() {
      console.log(this.$store.state.user);
      if (this.$store.state.user.name) {
        return `${this.$store.state.user.name}`;
      }
      return '';
    },
    userRole() {
      return this.checkList;
    },
  },
  created() {
    if(!this.$store.state.user.name && sessionStorage.getItem("store")) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
    }

    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    })

    window.addEventListener("pagehide", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    })

    this.checkList = this.$store.state.user.roles;

    console.log("app.vue created done");
    console.log(this.$store.state)
  },
  methods: {
    logout() {
      this.$store.commit('disconnect');
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.pointer {
  cursor: pointer;
}
</style>
